<!--
 * @author: Victor
 * @Date: 2021-01-29 21:39:41
 * @LastEditTime: 2021-02-05 15:20:32
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频审核</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css" />
    <link rel="stylesheet" href="lib/notiflix-1.3.0.min.css" />
    <script src="lib/jquery.min.js"></script>
    <style>
      .panel-body select.form-control,
      input.form-control {
        display: inline-block;
        vertical-align: middle;
        width: 10%;
      }
      input.form-control.result,select.form-control.result{
        width: 80%;
      }
      .panel-body span {
        font-size: 12px;
      }
    </style>
  </head>
  <body style="padding: 15px">
    <h2 class="text-center">黑马导师授课视频审核程序</h2>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">视频审核</h3>
      </div>
      <div class="panel-body">
        <form class="form-horizontal" id="check">
          <div class="form-group">
            <label for="object" class="col-sm-2 control-label">目标清晰</label>
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_1"
                id="object"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、能够举一个秒懂的案例，或者通过图解动画，或者抛出问题引发学生思考等手段，加深学生对知识点作用的理解。
                2、知识点作用清晰且准确 1、知识点作用不清晰或不准确
                0、未告知知识点的作用</span
              >
            </div>
          </div>
          <div class="form-group">
            <label for="line" class="col-sm-2 control-label">主线清晰</label>
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_2"
                id="line"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、非常清晰，没有ABC混讲 2、基本清晰，有1处ABC混讲
                1、有点混乱，有2处ABC混讲 0、非常混乱，有多处ABC混讲</span
              >
            </div>
          </div>
          <div class="form-group">
            <label for="summary" class="col-sm-2 control-label">落地小结</label>
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_3"
                id="summary"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、能够回扣目标，总结文字有结构，有层次，能够突出重点、难点、易错点、核心步骤、经验技巧和核心代码
                2、总结结构清晰，重点突出 1、总结缺乏结构，重点不突出
                0、没有总结性话术或文字</span
              >
            </div>
          </div>

          <div class="form-group">
            <label for="experience" class="col-sm-2 control-label"
              >教学体验</label
            >
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_4"
                id="eperience"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、语言表达、课堂互动、场景切换、电子教鞭、代码代码注释等体验良好，授课流畅，教学体验非常好         
                2、体验良好，有1处明显问题 1、体验一般，有2处明显问题
                0、体验很差，有多处不足</span
              >
            </div>
          </div>

          <div class="form-group">
            <label for="efficient" class="col-sm-2 control-label"
              >高效授课</label
            >
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_5"
                id="efficiency"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、授课效率非常高，直达本质 2、效率尚可，有1处啰嗦地方
                1、效率一般 ，有2处啰嗦地方 0、效率较差，有多处啰嗦地方</span
              >
            </div>
          </div>
          <div class="form-group">
            <label for="accurate" class="col-sm-2 control-label"
              >知识准确</label
            >
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_6"
                id="accuracy"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、没有任何知识讲解错误 2、存在1处知识讲解错误  
                1、存在2-3处知识讲解错误 0、存在3处以上知识讲解错误</span
              >
            </div>
          </div>
          <div class="form-group">
            <label for="useful" class="col-sm-2 control-label">案例实用</label>
            <div class="col-sm-10">
              <select
                class="form-control"
                id="use"
                name="result_7"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、案例贴近实用场景，通俗易懂 2、案例贴近生活，实用性一般
                1、案例基本不实用 0、案例属于简单入门demo</span
              >
            </div>
          </div>
          <div class="form-group">
            <label for="depth" class="col-sm-2 control-label">技术深度</label>
            <div class="col-sm-10">
              <select
                class="form-control"
                name="result_8"
                id="depth"
                placeholder=""
              >
                <option value="0">0分</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
              </select>
              <span
                >3、在讲解基础应用的同时有原理分析/源码分析/应用场景/解决行业问题等，深度非常合适 
                2、深度基本合适                1、有点浅或有点过深
                0、深度非常不合适</span
              >
            </div>
          </div>
          <div class="form-group">
            <label for="depth" class="col-sm-2 control-label">总计得分</label>
            <div class="col-sm-2">
              <input
                type="text"
                readonly
                name="result_sum"
                class="form-control result"
              />
            </div>
            <label for="grade" class="col-sm-1 control-label text-left">评级</label>
            <div class="col-sm-2">
              <select name="evaluate" class="form-control result" id="grade">
              <option value="差">差</option>
              <option value="中">中</option>
              <option value="良">良</option>
              <option value="优">优</option>
            </select>
            </div>
          </div>
          <div class="form-group">
            <label for="feedback" class="col-sm-2 control-label"
              >问题反馈与建议</label
            >
            <div class="col-sm-10">
              <textarea
                name="result_9"
                id="feedback"
                class="form-control"
                rows="3"
                required="required"
              ></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary">提交</button>
              <input
                type="button"
                value="回到列表"
                class="btn btn-info go-list"
              />
            </div>
          </div>
        </form>
      </div>
    </div>
    <script src="lib/notiflix-1.3.0.min.js"></script>
    <script>
      // 获取当前视频当前级别审核分数
      $.get(
        'http://119.45.60.228/examine' + location.search,
        function (res) {
          if (res.v_id && res.lv_id) {
            $('#check select').each(function () {
              var score = res[$(this).attr('name')];
              $(this)
                .children('[value=' + score + ']')
                .prop('selected', true);
            });
            // 显示评语
            $('#feedback').val(res.result_9);
            // 计算总分
            getSum();
          }
        }
      );

      function getSum() {
        var sum = 0;
        $('select.form-control').not('#grade').each(function () {
          sum += Number($(this).val());
        });
        $('[name="result_sum"]').val(sum);
        //显示 差 良 优
        // if(sum>=20){
        //   $('[value="super"]').prop('selected',true)
        // }else if(sum>=15){
        //   $('[value="good"]').prop('selected',true)
        // }else{
        //    $('[value="bad"]').prop('selected',true)
        // }

      }
      $('select.form-control').change(function () {
        getSum();
      });
      // 提交审核
      $('#check').submit(function (e) {
        e.preventDefault();
        var params = location.search.substr(1);
        var data = $(this).serialize();
        data += '&' + params;
        $.post('http://119.45.60.228/examine', data, function (res) {
          if (res.examine_id) {
            Notiflix.Confirm.Init();
            Notiflix.Confirm.Show(
              '审核成功!',
              '是否跳转到列表页?',
              '是',
              '否',
              function () {
                location.href = 'index.html';
              }
            );
          } else if (res.result == '修改成功') {
            Notiflix.Confirm.Init();
            Notiflix.Confirm.Show(
              '修改成功!',
              '是否跳转到列表页?',
              '是',
              '否',
              function () {
                location.href = 'index.html';
              }
            );
          } else {
            Notiflix.Notify.Init();
            Notiflix.Notify.Failure(res.result);
          }
        });
      });
      $('.go-list').click(function () {
        location.href = 'index.html';
      });
    </script>
  </body>
</html>
